<template>
  <!-- 点击分类进去的页面 -->
  <view class="classlist">
      <!-- 加载中圆圈 -->
      <view class="loadingLayout" v-if="!wallListList.length && !noData">
            <uni-load-more status="loading"></uni-load-more>
      </view>
    
      <view class="content">
             <navigator :url="`/pages/preview/preview?id=${item._id}`" class="item" v-for="item in wallListList" :key="item.classid">
               <image :src="item.smallPicurl" mode="aspectFill"></image>
             </navigator>
      </view>
      
      <!-- 加载中圆圈 -->
      <view class="loadingLayout" v-if="wallListList.length || noData">
            <uni-load-more :status="noData?'noMore':'loading'"></uni-load-more>
      </view>
      
      <view class="safe-area-inster-bottom"></view>
  </view>
</template>

<script setup>
  import { ref } from 'vue';
  import {onLoad,onReachBottom,onPullDownRefresh} from '@dcloudio/uni-app'
  import { apiwallList } from '@/api/apis.js'
  
  const noData=ref(false)
  // 接受从上个页面传递过来的参数
  const queryPramse = {
    pageNum:1,
    pageSize:12 //每页获取多少个
  }
  
  
  onLoad((e)=>{
    let {id,name} = e
    queryPramse.classid = id
    // 修改标题
    uni.setNavigationBarTitle({
      title:name
    })
    // 执行获取分类列表的方法
     getWallList()
  })
  
  //分类中壁纸列表（分类详情）
  const wallListList = ref([])
  const getWallList = async ()=>{
        const res = await apiwallList(queryPramse)
        wallListList.value=[...wallListList.value,...res.data]
        if(queryPramse.pageSize > res.data.length) noData.value = true;
        // 将后台获取过来的数据保存到本地缓存
        uni.setStorageSync('StorgClassList',wallListList.value)
  }
 
 
 // 页面触底函数
 onReachBottom(()=>{
   if(noData.value) return;
   // 页码加1
   queryPramse.pageNum++
   getWallList()
 })
 
 
 // 上拉刷新
 onPullDownRefresh(()=>{
   wallListList.value = []
   getWallList()
 })
</script>

<style lang="scss">
.classlist{
  .content{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 5rpx;
    padding: 5rpx;
    .item{
      height: 440rpx;
      image{
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
